/*
 OpenAero.css 1.3.3
 This file is part of OpenAero.

  OpenAero was originally designed by Ringo Massa and built upon ideas
  of Jose Luis Aresti, Michael Golan, Alan Cassidy and many others. 

  OpenAero is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  OpenAero is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with OpenAero.  If not, see <http://www.gnu.org/licenses/>.
*/

/* This file defines the common css styles for the desktop and
   mobile versions */

/* General styling */
body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Verdana, sans-serif;
}
span {
  margin: 0;
  padding: 0;
}
img {
  margin: 0;
}
a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
/* Remove Firefox dotted outline */ 
a:focus { 
  outline: none; 
}
hr {
  margin: 1px;
  padding: 0px;
}
img, svg, li {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
input {
  border-left: 1px solid #222;
  border-top: 1px solid #222;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-radius: 3px;
  margin-bottom: 1px;
}
select {
  border-left: 1px solid #222;
  border-top: 1px solid #222;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-radius: 3px;
  margin-bottom: 1px;
  background: #ffffff;
}
textarea {
  border-left: 1px solid #222;
  border-top: 1px solid #222;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-radius: 3px;
}
.fileDrop {
  left: 0px;
  right: 0px;
  height: 6em;
  border: 5px dashed #aaa;
  border-radius: 20px;
  background-color: #fff;
  color: #aaa;
  font-size: 2em;
  text-align: center;
  padding: 2em;
}
.clearBoth {
  clear: both;
}
.clearSpace {
  clear: both;
  height: 2px;
}
.clearLeft {
  clear: left;
}
.noDisplay {
  display: none;
}
#figureSvgContainer {
  position: absolute;
  left:-500px;
  width:0;
  height:0;
  opacity:0;
}
#figureChooserSvg {
  position: absolute;
  left:-500px;
  width:0;
  height:0;
  opacity:0;
}
#openAeroLogo {
  float:left;
  color: white;
  font-weight: bold;
  font-size: 14px;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  border-radius: 3px;
  background: #ff6030;
  padding: 3px;
  margin-right: 3px;
}
#mainMenu {
  width: 100%;
  height: 25px;
  font-size: 14px;
}
.section, .docs table tr {
  position: relative;
  float: left;
  width: 98%;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border-radius: 5px;
  margin: 10px 1px 1px 1px;
  background: #f4f4f4;
}
.docs table tr td {
  padding: 1em;
}
.docs table table tr {
  border: 0;
  background: transparent;
}
.documentation {
  width: auto;
  margin: 1em;
  padding: 2em;
  background: #f8f8f8;
  background: -webkit-linear-gradient(top, #ffffff, #f4f4f4);
  background: linear-gradient(top, #ffffff, #f4f4f4);
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
}
.docs {
  background: #f8f8f8;
  background: -webkit-linear-gradient(315deg, #ffe090, #fff);
  background: linear-gradient(315deg, #ffe090, #fff);
}
.docs table {
  margin: 1em;
}
.docs img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#sequenceInfo {
  font-size: 12px;
}
#figureInfo {
  font-size: 12px;
}
#alerts {
  font-size: 12px;
  color: #d22;
  background: #fff;
  clear: both;
}
.sectionLabel {
  float: left;
  font-size: 14px;
  color: #000;
  margin: -10px 0 -8px 10px;
  border-top: 1px solid #fff;
  background: #f4f4f4;
  border-radius: 10px;
  padding-left: 3px;
  padding-right: 3px;
}
#alerts .sectionLabel {
  background: #fff;
}
.sectionLabelClose {
  clear: both;
  margin-bottom: -8px;
}
.item {
  clear: both;
  margin: 2px;
}
.label {
  float: left;
}
#sequenceInfo input {
  float: right;
  width: 180px;
  height: 1.5em;
  font-size: 12px;
}
#sequenceInfo select {
  float: right;
  width: 182px;
  height: 1.6em;
  font-size: 12px;
}
#notes {
  width: 98%;
  font-size: 12px;
}
#activeLogo {
  float: right;
}
#sequenceInfo file {
  float: right;
  width: 120px;
  font-size: 12px;
  border: 1px solid black;
}
#design {
  padding-top:10px;
  text-align:center;
  text-shadow:1px 1px white;
  color:rgba(0,0,0,0.3);
}
#mainMenu ul {
  float: left;
}
.openFile {
  position: relative;
}
#mainMenu input {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 14px;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
#sequenceTextContainer {
  position: relative;
  margin-right: 12px;
  left: 22px;
  font-family: monospace;
  font-size: 16px;
  padding: 2px;
}
#sequenceTextClone {
  color: transparent;
  top: 0px;
  left: 2px;
  font-family: monospace;
  font-size: 16px;
  width: 98%;
  min-height: 16px;
}
#chooseLogo svg {
  margin: 10px 10px 0 0;
}
/*alertBox and print dialog styling*/
.box {
  position: absolute;
  z-index: 999;
  top: 20%;
  left: 10%;
  width: 80%;
  background: #f4f4f8;
  border: 1px solid white;
  border-radius: 5px;
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
}
#checkSequence {
  top: 10%;
}
.textButton {
  float:left;
  background: #55b;
  background: -webkit-linear-gradient(top, #66d 0%,#55b 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #66d 0%,#55b 100%); /* W3C */
  color: white;
  font-weight: bold;
  border: 2px solid #bcf;
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
  text-decoration: none;
  cursor: pointer;
}
.textButton a {
  color: white;
  text-decoration: none;
}
.textButton:hover {
  background: #77d;
  text-decoration: none;
}
#alertBox div,#printDialog div,#checkSequence div,#checkMulti div {
  overflow: auto;
  margin: 5px;
  padding: 2px;
}
#printDialog .main {
  clear: none;
  float: left;
}
#printDialog .sub {
  clear: none;
  float: left;
  border-left: 1px solid #ccc;
}
.close {
  float: right;
}
#alertBoxOverlay {
/* set font for noscript warning */
  font-size: 2em;
  color: white;
  padding: 2em;
  background: rgba(0,0,0,0.5);
  background: -webkit-linear-gradient(315deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
  background: linear-gradient(315deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
  background-repeat: no-repeat;
  background-position: center; 
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:998;
}
#alertBoxOverlay a {
  color: #8080ff;
  text-shadow: -1px -1px white;
}
#alertBoxOverlay svg {
  position: absolute;
  top: 30%;
}
.boxTitle {
  display: block;
  margin: -2px -1px 5px -1px;
  padding: 1px 10px 1px 10px;
  background: #ff9050;
  background: -webkit-linear-gradient(top, #ffa058 0%,#ff8048 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #ffa058 0%,#ff8048 100%); /* W3C */
  color: #fff;
  font-weight: bold;
  border-bottom: 1px solid white;
  border-radius: 5px 5px 0 0;
}

#dlTextField {
  float: left;
  font-size: 1.25em;
  width: 50%;
}
#saveFileFormDiv {
  width:1px;
  height:1px;
  border:0px;
  display:none;
}
#latestVersion {
  margin:-2px 1em 0 0;
  border:0;
  height:18px;
  width:200px;
}
#version {
  margin-right: 1em;
}
.figureStart {
  z-index: 1;
  position: absolute;
  display: hidden;
}
.figureStart hover {
  display: block;
}
#selectFigure {
/* z-index must be lower than that of .figureStart to prevent blinking */
  z-index: 0;
  position: absolute;
}
.largeButton {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  color: white;
  border-radius: 8px;
  padding: 1px 10px 1px 10px;
  background: rgb(55,176,232); /* non-W3C browsers */
  background: -webkit-linear-gradient(top, rgba(55,176,232,1) 0%,rgba(6,109,171,1) 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, rgba(55,176,232,1) 0%,rgba(6,109,171,1) 100%); /* W3C */
}
.largeButton a {
  text-decoration: none;
  color: white;
}
.largeButton a:hover {
  text-decoration: none;
}
/*TAB SELECTOR FUNCTIONALITY*/
.tabSelector {
  clear: both;
  overflow: hidden;
}
.tabSelector ul {
  padding: 0 0 1px 0;
  margin: 0;
}
.tabSelector li {
  margin: 0px;
  padding: 2px;
  clear: none;
  float: left;
  display: block;
  border-top: 1px solid white;
  border-right: 1px solid #888;
  border-radius: 5px 5px 0 0;
  text-align: center;
}
.tabSelector a {
  text-decoration: none;
  color: #115;
}
.tabSelector .inactiveTab {
  background: #d0d0d0;
  background: -webkit-linear-gradient(top, #c0c0c8, #e0e0e0);
  background: linear-gradient(top, #c0c0c8, #e0e0e0);
  color: #448;
  border-bottom:1px solid #888;
}
.tabSelector .activeTab {
  background: #f4f4f4;
  background: -webkit-linear-gradient(top, #d0d0e8, #f4f4f4);
  background: linear-gradient(top, #d0d0e8, #f4f4f4);
  margin-left: -1px;
  border-left: 1px solid white;
  border-bottom: 2px solid #f4f4f4;
  font-weight: bold;
  text-shadow: 1px 1px white;
}

/****************************
 *  Theming figure edit tab *
 ****************************/

#figureOptions {
  float: right;
/*  clear: both;*/
}
#selectedFigure {
  position: relative;
  float: right;
  margin-left: 2px;
  width: 140px;
  height: 140px;
  background: white;
  border: 2px solid #00f;
  border-radius: 3px;
  cursor: pointer;
}
#selectedFigure.active {
  float: left;
}
#unknownFigureChooser {
	float: left;
  width: 144px;
}
.display {
  display: block;
}
.nodisplay {
  display: none;
}
.hoverdisplay div {
  display: none;
}
.hoverdisplay:hover div {
  display: block;
}
#addFigureText {
  position: absolute;
  top: 0;
  left: 0;
  width: 98%;
  height: 98%;
  text-align: center;
  background: white;
  opacity: 0.7;
  z-index: 1;
}
#addFigureText div {
  margin-top: 1em;
  font-size: 2em;
  color: black;
  text-align: center;
}

/* buttons */
.button {
  float: left;
  width: 32px;
  height: 32px;
  margin: 1px;
}
#switchFirstRoll {
  background-image: url('buttons/switchFirstRoll.png');
}
#switchX {
  background-image: url('buttons/switchX.png');
}
#switchY {
  background-image: url('buttons/switchY.png');
}
#deleteFig {
  background-image: url('buttons/trash.png');
}
#magMin {
  background-image: url('buttons/magmin.png');
}
#magPlus {
  background-image: url('buttons/magplus.png');
}
#moveForward {
  background-image: url('buttons/moveforward.png');
}
#straightLine {
  background-image: url('buttons/straightline.png');
}
#curvedLine {
  background-image: url('buttons/curvedline.png');
}
#scale {
  float: left;
  font-size: 16px;
  text-align: center;
  height: 26px;
  width: 26px;
  margin: 2px;
}
#moveX,#moveY {
  float: left;
  font-size: 16px;
  text-align: center;
  height: 20px;
  width: 46px;
  margin: 2px;
}
#subSequence {
  background-image: url('buttons/subsequence.png');
}
#connector {
  background-image: url('buttons/connector.png');
}

/* button tooltips, disabled for mobile */
.tooltip {
  width: 100%;
  height: 100%;
  outline:none;
}
.tooltip div {
  display:none;
}

/* figureInfo styling */
#figureInfo.section select {
  float: left;
  border: 1px;
}
#entryExit span {
  float: left;
  margin-left: 3px;
  font-size: 14px;
  clear: none;
}
#entryExit span span {
  margin: 0px;
}
.rollGaps {
  float: left;
  clear: none;
}
.minButton {
  float: left;
  margin-left: 5px;
	background-image: url('buttons/smallMinus.png');
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0; /* equivalent to 'top left' */
	border: none;
	height: 20px;
  width: 20px;
  color: transparent;
}
.plusButton {
  float:left;
	background-image: url('buttons/smallPlus.png');
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0; /* equivalent to 'top left' */
	border: none;
	height: 20px;
  width: 20px;
  color: transparent;
}
.plusMinText {
  float: left;
  font-size: 12px;
  width: 1.25em;
  text-align: center;
}
#figureHeader {
  font-size: 14px;
}
/* roll selector */
.posFlickSelectOption {
  color: #00f;
}
.negFlickSelectOption {
  color: #f00;
}
.posSpinSelectOption {
  color: #00f;
}
.negSpinSelectOption {
  color: #f00;
}

/* logo chooser theme */

#logoChooserContainer {
  position: absolute;
  z-index: 20;
  width: 240px;
  padding: 6px;
  margin-bottom: 100px;
  left: -320px;
  top: 8px;
  background: #fff;
  background: -webkit-linear-gradient(top, #f4f4f8, #fff);
  background: linear-gradient(top, #f4f4f8, #fff);
  border: 1px solid #888;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  -moz-transition: 0.2s blur;
  -o-transition: 0.2s left;
  -webkit-transition: 0.2s left;
  transition: 0.2s left;
}
#logoChooserContainer.active {
  left: 2px;
}
#logoChooserContainer img {
  float: right;
  margin: 0 0 4px 4px;
}

#logoChooserContainer input {
  float: none;
  clear: both;
}

/* figure chooser theming */

#figureChooser {
  margin: 2px;
  width: 340px;
  height: 85%;
  background: rgba(255, 255, 255, 0.7);
  overflow: auto;
}
#figureChooser a:hover {
  text-decoration: none;
}
#figureSelectorClose {
  float: right;
}
table#figureChooserTable td {
  position: relative;
  padding: 1px;
  border: 2px solid #eee;
  border-radius: 5px;
  text-align: right;
  font-size: 14px;
}
table#figureChooserTable td.selected {
  border: 2px solid magenta;
}
table#figureChooserTable td.matchingFigure {
  box-shadow:inset 4px 4px #a0ff60;
}
table#figureChooserTable td.figureNotAllowed {
  outline: #ff8040 solid 2px;
  outline-offset: -3px;
}
.familyA {
  background: #fff;
}
.familyB {
  background: #f8f8f8;
}
.removeFromQueueButton {
  position: absolute;
  right: 0px;
  top: 0px;
  opacity: 0.3;
  transition: opacity .1s ease-in-out;
  -moz-transition: opacity .1s ease-in-out;
  -webkit-transition: opacity .1s ease-in-out;
}
.removeFromQueueButton:hover {
  opacity: 1;
}
/* main menu theming */

/*MENU DROPDOWN FUNCTIONALITY*/
/*set up ul tags*/ 
#menu, #menu ul{ padding:0; margin:0}
/*set up a tags*/ 
#menu a{display:block;}
/*position level 1 links horizontally*/ 
#menu li {
  display:block;
  float:left;
}
/*undo previous style for level 2 links*/
#menu li ul li {
  float:none;
}
/*position level 2 links vertically and hide*/ 
#menu li ul {
  display:none;
  position:absolute;
  z-index:10;
  -webkit-transform-style: preserve-3d;
  margin-top: -3px; /* prevents menu disappearing on FF */
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  background-color:#fbfbfb;
}
/*unhide level 2 links on li:hover from level 1*/ 
#menu li:hover ul {
  display:block;
}
#menu li.active ul {
  display:block;
}
/*undo previous style for level 3 links*/to
#menu li ul li ul li{float:none;}
/*position level 3 links vertically and hide*/ 
#menu li ul li ul{
  display:none;
  position:absolute;
  left:-162px;
  width:160px;
  z-index:10;
  -webkit-transform-style: preserve-3d;
  margin-top: -24px;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa
}
/*don't unhide level 3 links on li:hover from level 1*/ 
#menu li:hover ul li ul{display:none;}
#menu li.active ul li ul{display:none;}
/*unhide level 3 links on li:hover from level 2*/ 
#menu li:hover ul li:hover ul{display:block;}
#menu li.active ul li.active ul{display:block;}

/*DROPDOWN STYLING:*/
#menu {
  height:25px
}
#menu a {
  color:#00f;
  text-decoration: none;
  padding:5px 15px 5px 15px;
}
#menu a:hover {
  color:#03f;
}
#menu li {
  background-color:#fbfbfb;
/*  border:solid 1px #CCC; */
  margin-left:-1px;
}
#menu li:hover {
  background-color:#ddf;
}

/* Class select box */
#class {
  background: #ffc;
}

/*Combo input box*/
.combo {
  position:relative;
}
.combo * {
  padding:0;
  margin:0;
}
.combo input {
  width:120px;
  background-color:#ffc;
  height:1.5em;
  z-index:0;
}
.combo ul {
  padding:1px;
  border: 1px solid #000;
  width: 120px;
  background-color:#ffc;
  position:absolute;
  right:2px;
  top:1.6em;
  display:none;
  z-index:1;
}
.combo li {
  display:block;
  width: 100%;
  cursor: pointer;
}

/* printing styles are in OpenAero.js */
